<template>
	<div class="chart-one-container">
		<div ref="realTimePower" style="min-height: 13rem"></div>
		<p style="text-align: center; margin-top: -3rem">
			<span style="font-size: 13px">{{ $t('message.mainStationComprehensiveNews.pagePower') }}:</span>&nbsp;<span
				style="color: rgb(0, 162, 255); font-size: 1rem"
				>0.799 MW</span
			>
		</p>
		<div style="font-weight: bold; display: flex; font-size: 0.9rem; justify-content: space-around; margin-top: 1rem">
			<div style="text-align: center">
				<p>3.65</p>

				<p style="color: rgb(0, 162, 255)">{{ $t('message.mainStationComprehensiveNews.pageOperating') }}</p>
				<p style="color: rgb(0, 162, 255)">(h)</p>
			</div>
			<div style="text-align: center">
				<p>0.4777</p>
				<p style="color: rgb(0, 162, 255)">{{ $t('message.mainStationComprehensiveNews.pageDaily') }}</p>
				<p style="color: rgb(0, 162, 255)">(万kWh)</p>
			</div>
			<div style="text-align: center">
				<p>16.5912</p>
				<p style="color: rgb(0, 162, 255)">{{ $t('message.mainStationComprehensiveNews.pageMonth') }}</p>
				<p style="color: rgb(0, 162, 255)">(万kWh)</p>
			</div>
			<div style="text-align: center">
				<p>54.8112</p>
				<p style="color: rgb(0, 162, 255)">{{ $t('message.mainStationComprehensiveNews.pageYear') }}</p>
				<p style="color: rgb(0, 162, 255)">(万kWh)</p>
			</div>
			<div style="text-align: center">
				<p>480.6821</p>
				<p style="color: rgb(0, 162, 255)">{{ $t('message.mainStationComprehensiveNews.pageGeneration') }}</p>
				<p style="color: rgb(0, 162, 255)">(万kWh)</p>
			</div>
		</div>
	</div>
</template>

<script lang="ts" name="chartIndex">
import 'echarts-wordcloud';
import * as echarts from 'echarts';
import { defineComponent, onMounted, reactive, toRefs } from 'vue';

export default defineComponent({
	setup() {
		const state = reactive({
			realTimePower: null,
		});

		//实时功率
		const initRealTimePower = (): void => {
			if (!state.realTimePower) return;

			const containerStyle = getComputedStyle(state.realTimePower);
			if (containerStyle.width === '0px' || containerStyle.height === '0px') {
				return;
			}

			const option = {
				series: [
					{
						type: 'gauge',
						progress: {
							show: true,
							width: 12,
						},
						axisLine: {
							lineStyle: {
								width: 12,
							},
						},
						pointer: {
							show: true, // 显示指针
						},
						axisTick: {
							show: false, // 显示刻度
						},
						splitLine: {
							show: true, // 显示分割线
						},
						axisLabel: {
							show: false, // 显示数字
						},
						detail: {
							valueAnimation: false,
							fontSize: 12,
							color: '#fff',
							offsetCenter: ['10%', '40%'],
							formatter: '{value}%',
						},
						title: {
							offsetCenter: ['5%', '100%'],
						},
						data: [
							{
								value: 50, // 确保这是一个有效的数值
								name: '', // 这里确保 name 有效
							},
						],
					},
				],
			};

			const chart = echarts.init(state.realTimePower);
			chart.setOption(option);

			// 监听窗口大小变化
			window.addEventListener('resize', () => chart.resize());
		};

		onMounted(() => {
			initRealTimePower();
		});

		return {
			...toRefs(state),
			initRealTimePower,
		};
	},
});
</script>

<style lang="scss" scoped>
.chart-one-container {
	width: 100%;
	margin: 0 auto;
	padding: 0.9rem;
	padding-top: 0.5rem;
	border-radius: 0.5rem;
	background-color: #11214e;
	border: 1px solid #5aabfb;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
